<template>
	<el-dialog title="添加成员" :visible.sync="visible" width="30%" :before-close="close" :append-to-body="true">

		<span>组内成员：</span>
		<el-select v-model="members" multiple collapse-tags filterable :filter-method="querySearch" @focus="querySearch('')" style="width:400px;">
			<el-option v-for="item of options" :value="item.userId" :label="item.userName" :key="item.userId" :disabled="item.disabled"></el-option>

		</el-select>
		<span slot="footer" class="dialog-footer">
			<!-- <el-button @click="test">测试</el-button> -->
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="handleUpdate" :loading="loading">确 定</el-button>
		</span>

	</el-dialog>
</template>

<script>
	import { listUser } from "@/api/dataManagement/system/user";
	import { updateGroupMember } from "@/api/dataManagement/system/group";
	export default {
		props: ['memberList', 'groupId'],
		data() {
			return {
				visible: false,
				members: [],
				options: [],
				loading: false
			};
		},
		methods: {
			show() {
				this.options = []
				this.members = []
				this.visible = true
			},
			close() {
				this.visible = false
			},
			querySearch(value) {
				listUser({ userName: value }).then(res => {
					let options = res.rows.map(item => {
						if (this.memberList.filter(item2 => item2.userId == item.userId).length > 0) {
							item.disabled = true
						} else {
							item.disabled = false
						}
						return item
					});
					this.options = options
				})
			},

			handleUpdate() {
				let params = {
					groupId: this.groupId,
					isAdd: true,
					userIds: this.members
				}
				this.loading = true
				updateGroupMember(params).then(res => {
					if (res.code == 200) {
						this.msgSuccess(res.msg)
						this.$emit('refresh')
						this.visible = false
					}
					this.loading = false
				})
			}
		}
	}
</script>
